<template>
	<NavBar :obj="{ title: '我的订单', color: '#000', backgroundColor: 'transparent' }" :scrollTop="scrollTop" />

	<image :src="theme?.bg?.my_order" mode="widthFix" class="img-top"></image>
	<up-sticky :offset-top="offsetTop">
		<view class="tabs">
			<up-tabs
				:list="condition"
				@click="conditionCah"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:scrollable="false"
				:current="current"
				:lineColor="theme?.themeColor"
			></up-tabs>
		</view>
	</up-sticky>

	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="sn flex items-center justify-between">
				<view class="order-no flex items-center">
					<view>订单号：{{ item.sn }}</view>
				</view>
				<view class="status">{{ item.status_name }}</view>
			</view>
			<block v-if="item.productsField.length == 1">
				<view class="middle flex justify-between" v-for="(item2, index2) in item.productsField" :key="index2" @click="goUrl('/pages/order/my_order_details?id=' + item.id)">
					<image :src="imgUrl + item2.icon" class="icon"></image>
					<view class="titles flex-1">
						<view class="t">{{ item2.title }}</view>
						<view class="spec">{{ item2.spec }}</view>
					</view>
					<view class="total flex flex-col items-center justify-center">
						<view :class="{ 'rmb-black': item.pay_way_raw != 'hds' }" class="val">{{ item2.vip_price }}</view>
						<view class="num">共{{ item2.num }}件</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="middle flex justify-between">
					<view class="flex flex-1 all-icon">
						<block v-for="(item2, index2) in item.productsField" :key="index2">
							<image :src="imgUrl + item2.icon" class="icon" v-if="index2 < 3" @click="goUrl('/pages/order/details?id=' + item.id)"></image>
						</block>
					</view>

					<view class="total flex flex-col items-center justify-center">
						<view :class="{ 'rmb-black': item.pay_way_raw != 'hds' }" class="val">{{ item.pay_way_raw != 'hds' ? item.real_amount : item.hds_amount }}</view>
						<view class="num">共{{ item.num }}件</view>
					</view>
				</view>
			</block>
			<view class="bottom flex items-center justify-end">
				<view class="btn border-btn gray-btn" @click="goUrl('/pages/order/my_order_details?id=' + item.id)" v-if="item.status > 1">查看详情</view>
				<view class="btn border-btn gray-btn" v-if="item.status == 1" @click="editOrder(item.id, 'cancel')">取消订单</view>

				<view class="btn fill-btn" v-if="item.status == 1" @click="goUrl('/pages/order/payment?id=' + item.id)">立即付款</view>
				<view class="btn fill-btn" v-if="item.status == 3" @click="editOrder(item.id, 'receipt')">确认收货</view>
			</view>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392upx" marginTop="50%" text="暂无订单" />
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, nextTick, inject } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading } from '../../service/port';
	import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';

	const theme = useThemeStore();

	const scrollTop = ref(0);
	const showLoad = ref(true);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	const offsetTop = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		page.value = 1;
		list.value.length = 0;
		getMyOrder();
	});

	const current = ref(0);
	onLoad((e) => {
		if (e.type) {
			status.value = e.type;
			current.value = e.type == 5 ? 4 : e.type;
		}
	});

	const condition = reactive([
		{ name: '全部', val: '' },
		{ name: '待支付', val: 1 },
		{ name: '待发货', val: 2 },
		{ name: '待收货', val: 3 },
		{ name: '已完成', val: 5 }
	]);

	const list = ref([]);
	const page = ref(1);
	const status = ref('');

	async function getMyOrder() {
		let res = await port('getMyOrder', { page: page.value, status: status.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}

	function conditionCah(e) {
		status.value = e.val;
		page.value = 1;
		list.value.length = 0;
		showLoad.value = true;
		getMyOrder();
	}

	function editOrder(id, type) {
		uni.showModal({
			title: '请确认',
			content: type == 'cancel' ? '确定要取消订单吗？' : '是否确认收货？',
			confirmColor: theme.themeColor,
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('editOrder', { id: id, type: type });
					await nextTick();
					hint(res.msg);
					page.value = 1;
					list.value.length = 0;
					getMyOrder();
					closeLoading();
				}
			}
		});
	}

	onReachBottom(() => {
		getMyOrder();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
	}
	.img-top {
		width: 100%;
		height: 350upx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.tabs {
		background: #ffffff;
		border-radius: 20upx;
		padding: 5upx 10upx;
		margin: 30upx;
	}
	.all-icon {
		gap: 10upx;
	}

	.bottom {
		gap: 16upx;
		margin-top: 28upx;

		.btn {
			width: 160upx;
			padding: 12rpx 0;
			text-align: center;
			border-radius: 16upx;
		}
		.border-btn {
			font-weight: 400;
			font-size: 26upx;
			padding: 10rpx 0;
		}
		.gray-btn {
			color: #666;
			border: 1upx solid #cccccc;
		}
		.error-btn {
			color: #f81a2e;
			border: 1px solid #f81a2e;
		}
		.fill-btn {
			font-size: 26upx;
			color: #ffffff;
			background:  $theme-bg-btn-color;
		}
		.expert {
			color: #f81a2e;
			background: #ffe3dd;
			border: none;
			font-size: 26upx;
			padding: 10rpx 0;
		}
	}

	.fill {
		position: relative;
		padding-bottom: 120upx;
		.item {
			margin: 24upx 30upx;
			padding: 28upx;
			background: #ffffff;
			border-radius: 20upx;
			.sn {
				.order-no {
					// font-weight: 400;
					// font-size: 24upx;
					// color: #999999;
					> image {
						width: 36rpx;
						height: 36rpx;
						border-radius: 6rpx;
					}
					> view {
						font-weight: 500;
						font-size: 26rpx;
						color: #000000;
						margin-left: 10rpx;
					}
				}
				.status {
					font-weight: 400;
					font-size: 28upx;
					color: #f81a2e;
				}
			}
			.middle {
				padding: 26upx 0;
				.icon {
					width: 156upx;
					height: 156upx;
					border-radius: 20upx;
				}

				.titles {
					margin: 0 40upx 0 16upx;
					.t {
						font-weight: 400;
						font-size: 26upx;
						color: #000000;
						margin-bottom: 23upx;
					}
					.spec {
						font-weight: 400;
						font-size: 22upx;
						color: #999999;
					}
				}
				.total {
					.val {
						font-weight: 500;
						font-size: 30upx;
						color: #000000;
					}
					.num {
						font-weight: 400;
						font-size: 24upx;
						color: #333333;
						margin-top: 10upx;
						margin-left: 15px;
					}
				}
			}
		}
	}
</style>
